<template>
	<view class="page">
		<custom-navigation title="筛选" rightTxt="重置" @rightAction="reset()">
		</custom-navigation>

			<view class="head-item flex-row-center">
				<view class="title">单据编号</view>
				<input class="value" style="text-align: right;" v-model="num" placeholder="请输入单据编号" />
			</view>
		 
			<view class="head-item flex-row-center">
				<view class="title">商品名称</view>
				<input class="value" style="text-align: right;" v-model="name" placeholder="请输入商品名称/条形码/助记码" />
			</view>
 
		<view class="head-item flex-row-center"
			@click="$navigateTo('/pages/goods/classify_goods?selectMode=true&isMultiple=true')">
			<view class="title">商品分类</view>
			<view :class="getClassifyName()?'value':'emptyvalue'">
				{{getClassifyName()||'请选择'}}
			</view>

			<image class="close-image" src="/static//close2.png" v-if="getClassifyName()"
				@click.native.stop="goods_classify=[]"></image>
			<image src="/static/arrow-blackmin.png"></image>
		</view>

		<view class="head-item flex-row-center"
			@click="$navigateTo('/pages/goods/goods_brand?selectMode=true&isMultiple=true')">
			<view class="title">商品品牌</view>
			<view :class="getBrandName()?'value':'emptyvalue'">{{getBrandName()||'请选择'}}</view>
			<image class="close-image" src="/static//close2.png" v-if="getBrandName()" @click.native.stop="brand=[]">
			</image>
			<image src="/static/arrow-blackmin.png"></image>
		</view>


		<view class="head-item flex-row-center"
			@click="$navigateTo('/pages/goods/goods_supplier?selectMode=true&isMultiple=true')">
			<view class="title">供应商</view>
			<view :class="getSupplierName()?'value':'emptyvalue'">{{getSupplierName()||'请选择'}}
			</view>
			<image class="close-image" src="/static//close2.png" v-if="getSupplierName()"
				@click.native.stop="supplier=[]"></image>
			<image src="/static/arrow-blackmin.png"></image>
		</view>
		<picker :value="deviceStateIndex" :range="deviceStateNames"
					@change="e=>deviceStateIndex = e.detail.value">
		<view class="head-item flex-row-center" >
			<view class="title">操作类型</view>
			<view :class="deviceStateIndex!=-1?'value':'emptyvalue'">{{deviceStateNames[deviceStateIndex]||'请选择'}}
			</view>
		 
			<image src="/static/arrow-blackmin.png"></image>
		</view>
				</picker>
		<view class="query-btn" @click="getData()">查询</view>

	</view>
</template>

<script>
	import {
		fatherAndSonUpdates,
		fatherAndSonAdds
	} from '@/common/api/parameter_tool.js'
	export default {
		data() {
			return {
				deviceStateNames: ['初始入库单', '订单支付','订单退货退款' ,'入库单','出库单','盘点单','报损单'],
				deviceStateIndex: -1,
				editGoodsDialogShow: false,
				currGoodsInfo: {},
				remarkDialogShow: false,
				title: "新增库存",
				remark: "",
				dialogRemark: "",
				currInputNum: '',
				currInputPrice: '',
				goodsList: [],
				info: null,
				name: '',
				num:'',
				goods_classify: [],
				brand: [],
				supplier: [],
				goodsTypeIndex: 0,
				goodsTypes: ["全部", "上架", "下架", "售馨"],
				stocy_num: '',
				stocy_rule_index: 0,
				stocy_rule_name: ["大于", '大于等于', '等于', '小于', '小于等于'],
				stocy_rule_no: ["gt", 'ge', 'eq', 'lt', 'le'],
				isExpand: false,
				page: 1,
			}
		},
		onLoad(options) {
			// this.getData()
		},
		onShow() {
			let list = uni.getStorageSync("multipleSelectList")
			if (list != null) {
				for (let i in list) {
					list[i].id = null;
				}
				let listbars = [];
				for (let i in this.goodsList) {
					listbars.push(this.goodsList[i].goods_barcode);
				}
				
				for (let i in list) {
					let barcode = list[i].goods_barcode;
					if (listbars.indexOf(barcode) == -1) {
						this.goodsList.push(list[i]);
					}
				}
				uni.setStorageSync("multipleSelectList", null)
			}
			let listBrand = uni.getStorageSync("multipleSelectBrand")
			if (listBrand != null) {
				this.brand = listBrand;
				uni.setStorageSync("multipleSelectBrand", null)
			}

			let listSupplier = uni.getStorageSync("multipleSelectSupplier")
			if (listSupplier != null) {
				this.supplier = listSupplier;
				uni.setStorageSync("multipleSelectSupplier", null)
			}
			let listClassify = uni.getStorageSync("multipleSelectClassify")
			if (listClassify != null) {
				this.goods_classify = listClassify;
				uni.setStorageSync("multipleSelectClassify", null)
			}


		},
		methods: {
			reset(){
				this.name=""  
				this.num=""
				this.goods_classify=[]
				this.brand=[]
				this.supplier= []
				this.deviceStateIndex = -1;
			},
			getClassifyName() {
				let str = ''
				for (let i in this.goods_classify) {
					str += "," + this.goods_classify[i].classify_name
				}
				if (str.length > 0) str = str.substring(1)
				return str;
			},
			getBrandName() {
				let str = ''
				for (let i in this.brand) {
					str += "," + this.brand[i].brand_name
				}
				if (str.length > 0) str = str.substring(1)
				return str;
			},

			getSupplierName() {
				let str = ''
				for (let i in this.supplier) {
					str += "," + this.supplier[i].supplier_name
				}
				if (str.length > 0) str = str.substring(1)
				return str;
			},
			confirmEntry() {
				this.currGoodsInfo.warehousing_num = this.currInputNum;
				this.currGoodsInfo.purchase_price = this.currInputPrice;
				this.editGoodsDialogShow = false;
			},
			itemOnClick(item) {
				this.currGoodsInfo = item;
				this.currInputNum = this.currGoodsInfo.warehousing_num+"";
				this.currInputPrice = this.currGoodsInfo.purchase_price+"";
				this.editGoodsDialogShow = true;
			},
			rightAction() {
				this.remark = this.dialogRemark;
				this.remarkDialogShow = false;
			},
			getAllQty() {
				let countQty = 0;
				for (let i in this.goodsList) {
					countQty += parseInt(this.goodsList[i].warehousing_num ?? '0')
				}
				return countQty;
			},
			remove(index) {
				this.goodsList.splice(index, 1)
			},
			getAmount(item) {
				return (item.purchase_price ?? 0) * (item.warehousing_num ?? 1)
			},
			  
			getData() {


				let condition = [];
				let relation_data= [];
				if (this.supplier.length != 0) {//供应商
					 let data=[];
					for (let i in this.supplier) { 
						data.push({
							"colName": "supplier_str",
							"ruleType": "like",
							"value": this.supplier[i].supplier_name
						})
					}
					relation_data.push({
						relation:"OR",
						data:data
					})
				}

				if (this.goods_classify.length != 0) {//分类
					let data=[];
					for (let i in this.goods_classify) { 
						data.push({
							"colName": "goods_classify_str",
							"ruleType": "like",
							"value": this.goods_classify[i].classify_name
						})
					}
					relation_data.push({
						relation:"OR",
						data:data
					})
				}

				if (this.brand.length != 0) {//品牌
					let data=[];
					for (let i in this.brand) {
						data.push({
							"colName": "brand_str",
							"ruleType": "like",
							"value": this.brand[i].brand_name
						})
					}
					
					relation_data.push({
						relation:"OR",
						data:data
					})
				}
				if (this.name.length != 0) {//名称
					let data=[]; 
						data.push({
							"colName": "goods_name_str",
							"ruleType": "like",
							"value": this.name
						})
						data.push({
							"colName": "goods_barcode_str",
							"ruleType": "like",
							"value": this.name
						})
						data.push({
							"colName": "mnemonic_code",
							"ruleType": "like",
							"value": this.name
						})
				 
					
					relation_data.push({
						relation:"OR",
						data:data
					})
				}

				if (this.num.length != 0) {//单据编号
					let data=[]; 
						data.push({
							"colName": "bill_no",
							"ruleType": "like",
							"value": this.num
						})
				 
					
					relation_data.push({
						relation:"OR",
						data:data
					})
				}
				
				
				if(this.deviceStateIndex!=-1){
					let data=[];
						data.push({
							"colName": "operation_type",
							"ruleType": "eq",
							"value": this.deviceStateNames[this.deviceStateIndex]
						}) 
					relation_data.push({
						relation:"OR",
						data:data
					})
				}
				uni.setStorageSync("relation_condition", {
					relation: "AND",
					data:relation_data
				});
				 
				
				uni.navigateBack()
				return;
 
			}
		}
	}
</script>

<style scoped lang="scss">
	.head-contaienr {
		background-color: white;

		.item {
			padding: 20rpx 20rpx;

			.value {
				flex: 1;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}


		}

		.bluebtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(56, 192, 158, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);
		}

		.redbtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(212, 48, 48, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(212, 48, 48, 1);
		}
	}

	.head-item {
		padding-left: 20rpx;
		padding-right: 24rpx;
		min-height: 100rpx;
		background-color: white;
		margin-bottom: 2rpx;

		.btn {
			text-align: center;
			width: 140rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 8rpx;
			background: rgba(56, 192, 158, 1);
			margin-left: 80rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}

		.expand {
			margin-left: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.rule {
			margin-left: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 0px;
			color: rgba(153, 153, 153, 1);

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.value {
			flex: 1;
			font-size: 28rpx;
			font-weight: 500;
			text-align: right;
		}

		.emptyvalue {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
		}

		image {
			margin-left: 16rpx;
			width: 8rpx;
			height: 16rpx;
		}

		.close-image {
			width: 40rpx;
			height: 40rpx;
		}

		.add-goods {
			box-sizing: content-box;
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 60rpx;
			border: 1px solid rgba(212, 48, 48, 1);
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(212, 48, 48, 1);
		}
	}

	.remark-dialog {
		width: 560rpx;
		justify-content: center;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		padding-top: 34rpx;

		.title-box {
			font-size: 18px;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
			position: relative;

			.text {
				width: 540rpx;
				text-align: center;
			}

			image {
				width: 52rpx;
				position: absolute;
				right: 10rpx;
				top: 0;
				height: 52rpx;
			}
		}

		.line {
			margin-top: 14rpx;
			height: 2rpx;
			width: 100%;
			background-color: rgba(225, 225, 225, 1);
		}

		.input {
			width: 464rpx;
			height: 210rpx;
			margin-left: 48rpx;
			margin-top: 44rpx;
			margin-bottom: 60rpx;
			border: 2rpx solid rgba(241, 241, 241, 1);
			padding: 20rpx;
			box-sizing: border-box;
			color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
			font-weight: 500;
		}


		.boottom-btn-box {
			width: 100%;
			height: 100rpx;
			border-radius: 0 0 20rpx 20rpx;
			font-size: 36rpx;
			font-weight: 700;
			border-top: 2rpx solid rgba(224, 222, 222, 1);

			.left-btn {
				flex: 1;
				line-height: 100rpx;
				text-align: center;
				color: rgba(56, 192, 158, 1);
				border-right: 1rpx solid rgba(224, 222, 222, 1);
			}

			.right-btn {
				flex: 1;
				line-height: 100rpx;
				text-align: center;
			}
		}
	}

	.total-box {
		padding-left: 24rpx;
		height: 80rpx;
		opacity: 1;
		background: rgba(227, 227, 227, 1);
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}

	.item-view {
		padding: 26rpx 20rpx 0 24rpx;
		padding-bottom: 18rpx;
		background: rgba(255, 255, 255, 1);
		border-bottom: 2rpx solid rgba(245, 245, 247, 1);
		;
		position: relative;

		.name {
			padding-bottom: 20rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);

		}

		view {
			flex: 0.7;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}

		image {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 24rpx;
			top: 66rpx;
		}
	}

	.qrcode-img {
		width: 140rpx;
		height: 140rpx;
		position: fixed;
		bottom: 268rpx;
		right: 24rpx;
	}

	.bottom-container {
		background-color: white;
		box-shadow: 0 -16rpx 16rpx 1rpx #00000008;
		height: 146rpx;
		padding: 0 24rpx;
		justify-content: space-around;

		.item {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #333333FF;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;

		}

		.item1 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid rgba(56, 192, 158, 1);
			background-color: rgba(56, 192, 158, 1);
			color: white;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.text {
			flex: 1;
			margin-left: 60rpx;
			font-size: 30rpx;
			font-weight: 700;

		}

		.btn {
			margin-right: 34rpx;
			width: 192rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: rgba(56, 192, 158, 1);
			font-size: 30rpx;
			font-weight: 700;
			color: white;
			text-align: center;
			line-height: 80rpx;
		}
	}


	.showDialog {
		animation: showDialog 0.3s ease-out;
		padding-top: 54rpx;
		width: 750rpx;
		border-radius: 40rpx 40rpx 0 0;
		background: rgba(255, 255, 255, 1);

		.r {
			padding-left: 44rpx;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);

			input {
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 5rpx;
				text-align: center;
				opacity: 1;
				border-radius: 4rpx;
				border: 1px solid rgba(153, 153, 153, 1);
			}
		}

		.bottom-box {
			margin-top: 55rpx;
			box-shadow: 0 -32rpx 32rpx 2rpx rgba(245, 245, 247, 1);

			.cancel {
				flex: 1;
				height: 146rpx;
				line-height: 146rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				color: black;
				background-color: white;
			}

			.confirm {
				flex: 1;
				height: 146rpx;
				line-height: 146rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				color: white;
				background-color: rgba(56, 192, 158, 1);
				;
			}
		}

	}

	// 呼吸帧
	@keyframes showDialog {
		0% {
			transform: translate(0%, 100%);
		}

		100% {
			transform: translate(0%, 0%);
		}

	}

	.query-btn {
		margin-left: 48rpx;
		margin-top: 122rpx;
		width: 654rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 100rpx;
		background: rgba(56, 192, 158, 1);
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
	}
</style>
